//数据概览，常用功能

<template>
  <div>
      <el-col :span="20">
          <el-row >
              <el-col :span="20">
                  <div class="ls-nav grid-content bg-purple">
                      <b>数据概览，常用功能</b>
                  </div>
              </el-col>
          </el-row>
          <br>
          <el-row>
              <div class="ls-nav1">
                  <p>数据概览</p>
              </div>
          </el-row>
          <el-row>
              <div class="ls-nav3">
                  <div class="ls-text1">
                      <span>代付款</span>
                      <b>11</b>
                  </div>
                  <div class="ls-text2">
                      <span>代发货</span>
                      <b>15</b>
                  </div>
                  <div class="ls-text3">
                      <span>退款中</span>
                      <b>4</b>
                  </div>
                  <div class="ls-text4">
                      <span>出售中的宝贝</span>
                      <b>19</b>
                  </div>
                  <div class="ls-text5">
                      <span>支付完成</span>
                      <b>11</b>
                  </div>
                  <div class="ls-text6">
                      <span>成交金额</span>
                      <b>550</b>
                  </div>
              </div>
          </el-row>
          <br><br>
          <el-row>
              <div class="ls-nav1">
                  <p>常用功能</p>
              </div>
          </el-row>
          <br><br>
          <el-row>
              <el-col :span="4" :offset="2">
                  <div class="ls-picture">
                      <a href="http://localhost:8066/index/essentialInformation"><button class="btn2"><span class="ls-pt1 el-icon-sold-out"><span>发布商品</span></span></button></a>
                  </div>
              </el-col>
              <el-col :span="4" :offset="2">
                  <div class="ls-picture">
                      <a href="http://localhost:8066/index/financialOverview"><button class="btn2"><span class="ls-pt1 el-icon-sold-out"><span>收入/提现</span></span></button></a>
                  </div>
              </el-col>
              <el-col :span="4" :offset="2">
                  <div class="ls-picture">
                      <a href="http://localhost:8066/index/useDisplay"><button class="btn2"><span class="ls-pt1 el-icon-sold-out"><span>用户管理</span></span></button></a>
                  </div>
              </el-col>
              <el-col :span="4" :offset="2">
                  <div class="ls-picture">
                      <a href="http://localhost:8066/index/orderManagement"><button class="btn2"><span class="ls-pt1 el-icon-sold-out"><span>订单管理</span></span></button></a>
                  </div>
              </el-col>
          </el-row>
          <br>
          <el-row>
              <el-col :span="4" :offset="2">
                  <div id="charts" style="width:300px;height:200px;}"></div>
              </el-col>
              <el-col :span="2" :offset="7">
                  <div class="chart">
                      <ul>
                          <li>80-100</li>
                          <li>60-80</li>
                          <li>40-60</li>
                          <li>20-40</li>
                          <li>0-20</li>
                      </ul>
                  </div>
              </el-col>
              <el-col :span="3">
                  <div id="charts1">
                      <div class="ls-chart2"></div>
                      <div class="ls-chart3"></div>
                      <div class="ls-chart4"></div>
                      <div class="ls-chart5"></div>
                      <div class="ls-chart6"></div>
                  </div>
              </el-col>
              <el-col :span="4" :offset="15">
                  <div class="ls-ul">
                      <ul>
                          <li>待收入</li>
                          <li>出售中的宝贝</li>
                          <li>支付完成</li>
                          <li>代付款</li>
                          <li>退款中</li>
                      </ul>
                  </div>
              </el-col>
          </el-row>
          <br><br><br>
      </el-col>
  </div>
</template>

<style lang="less">


    .ls-nav{
        position: relative;
        left: 30px;
        text-align: left;
    }
    .ls-nav1{
        position: relative;
        left: 50px;
        height: 50px;
        background: #f2f2f2;
        width: 900px;
        border-radius: 4px;
    }
    .ls-nav1 p{
        height: 50px;
        line-height: 50px;
        text-indent: 20px;
    }
    .ls-nav3{
        width:900px ;
        height: 160px;
        position: relative;
        left: 50px;
        border-radius: 4px;
        border:1px solid rgb(240, 240, 240);
    }
    .ls-text1{
        position: absolute;
        left: 10px;
        height: 100px;
        width: 120px;
        top: 20px;
    }
    .ls-text1 span{
        position: absolute;
        top: 20px;
        left: 40px;
    }
    .ls-text1 b{
        position: absolute;
        top:80px;
        left: 60px;
        font-size: 20px;
    }
    .ls-text2{
        position: absolute;
        left: 150px;
        height: 100px;
        width: 120px;
        top: 20px;
    }
    .ls-text2 span{
        position: absolute;
        top: 20px;
        left: 40px;
    }
    .ls-text2 b{
        position: absolute;
        top:80px;
        left: 60px;
        font-size: 20px;
    }
    .ls-text3{
        position: absolute;
        left: 320px;
        height: 100px;
        width: 120px;
        top: 20px;
    }
    .ls-text3 span{
        position: absolute;
        top: 20px;
        left: 40px;
    }
    .ls-text3 b{
        position: absolute;
        top:80px;
        left: 60px;
        font-size: 20px;
    }
    .ls-text4{
        position: absolute;
        left: 470px;
        height: 100px;
        width: 120px;
        top: 20px;
    }
    .ls-text4 span{
        position: absolute;
        top: 20px;
        left: 40px;
    }
    .ls-text4 b{
        position: absolute;
        top:80px;
        left: 60px;
        font-size: 20px;
    }
    .ls-text5{
        position: absolute;
        left: 620px;
        height: 100px;
        width: 120px;
        top: 20px;
    }
    .ls-text5 span{
        position: absolute;
        top: 20px;
        left: 40px;
    }
    .ls-text5 b{
        position: absolute;
        top:80px;
        left: 60px;
        font-size: 20px;
    }
    .ls-text6{
         position: absolute;
         left: 770px;
         height: 100px;
         width: 120px;
         top: 20px;
     }
    .ls-text6 span{
        position: absolute;
        top: 20px;
        left: 40px;
    }
    .ls-text6 b{
        position: absolute;
        top:80px;
        left: 60px;
        font-size: 20px;
    }
    .btn2{
        width: 100px;
        height: 40px;
        background: none;
        border: none;
        cursor: pointer;
        outline: none;
    }
    .ls-pt1{
        height: 40px;
        line-height: 40px;
        font-size: 20px;
    }

    /* <!--统计图-->*/
    #charts{
        float: left;
        position: relative;
        left: 30px;
    }
    #charts1{
        width:400px;
        height:200px;
        position: absolute;
        left: 520px;
        border-left: 1px solid  black;
        border-bottom: 1px solid  black;
    }
    .ls-chart2{
        width: 50px;
        height: 80px;
        background: chartreuse;
        position: absolute;
        left:20px;
        top:120px ;
    }
    .ls-chart3{
        width: 50px;
        height: 120px;
        background: chartreuse;
        position: absolute;
        left:100px;
        top:80px ;
    }
    .ls-chart4{
        width: 50px;
        height: 180px;
        background: chartreuse;
        position: absolute;
        left:180px;
        top:20px ;
    }
    .ls-chart5{
        width: 50px;
        height: 130px;
        background: chartreuse;
        position: absolute;
        left:260px;
        top:70px ;
    }
    .ls-chart6{
        width: 50px;
        height: 30px;
        background: chartreuse;
        position: absolute;
        left:340px;
        top:170px ;
    }
    .ls-ul{
        position: relative;
        top: 10px;
    }
    .ls-ul ul{
        width: 400px;
        height: 30px;
    }
    .ls-ul li{
        text-align: center;
        width: 73px;
        height: 20px;
        line-height: 20px;
        float: left;
    }
    .chart ul{
        width: 70px;
        height: 200px;
    }
    .chart li{
        text-align: center;
        width: 60px;
        height: 40px;
        line-height: 40px;
    }
</style>

<script>

    var echarts = require('echarts');


    import store from './../store'


    export default {
        store,
        mounted() {
            /*ECharts图表*/
            var myChart = echarts.init(document.getElementById('charts'));
            myChart.setOption({
                series : [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: '55%',
                        itemStyle: {
                            normal: {
                                // 阴影的大小
                                shadowBlur: 200,
                                // 阴影水平方向上的偏移
                                shadowOffsetX: 0,
                                // 阴影垂直方向上的偏移
                                shadowOffsetY: 0,
                                // 阴影颜色
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        data:[
                            {value:400, name:'待收入'},
                            {value:335, name:'代发货'},
                            {value:310, name:'出售中的宝贝'},
                            {value:274, name:'退款中'},
                            {value:235, name:'支付完成'}
                        ]
                    }
                ]
            })
        },
    }



</script>